<template>
    <div class="forgetBox">
        <router-link :to="{path:'/pwdlogin'}">
            <van-icon name="arrow-left"  style="font-size: 30px;"/>
        </router-link>
        <h1>找回密码</h1>
        <div class="content">
            <!-- 输入任意文本 -->
            <van-field v-model="user" label="账号："  class="inputbox" placeholder="请输入账号"/>
            <!-- 输入密码 -->
            <van-field v-model="password" type="password" label="密码:"  class="inputbox" placeholder="请输入新密码"/>
            <!-- 输入手机号，调起手机号键盘 -->
            <van-field v-model="tel" type="tel" label="手机号:" class="inputbox"  placeholder="请输入手机号"/>
            <van-field
                    v-model="code"
                    center
                    clearable
                    label="验证码:"
                    placeholder="请输入短信验证码"
                    class="inputbox"
            >
                <template #button>
                    <van-button size="small" type="primary" @click="getCode1">发送验证码</van-button>
                </template>
            </van-field>
            <van-button type="info" class="forget" @click="submit">提交</van-button>
            <router-link :to="{path:'/pwdlogin'}">
                <span style="color: blue">去登录</span>
            </router-link>
        </div>

    </div>
</template>

<script>
    var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
    import {forgetPwd, getCode} from "../api/api";
    import {Dialog, Notify} from "vant";

    export default {
        name: "Forgetpwd",
        data(){
            return {
                code:'',
                tel: '',
                user: '',
                password: '',
            }
        },
        methods:{
            //修改密码
            submit(){
                if(this.user==''&&this.password==''&&this.tel==''&&this.code==""){
                    Dialog.alert({
                        message: '全部内容不能为空！',
                        theme: 'round-button',
                    }).then(() => {
                    });
                }else{
                    forgetPwd(this.user,this.password,this.tel,this.code).then(res=>{
                        console.log(res)
                        if(res.data.code==0){
                            Dialog.alert({
                                message: res.data.msg,
                                theme: 'round-button',
                            }).then(() => {
                            });
                        }else {
                            Dialog.alert({
                                message:res.data.msg,
                                theme: 'round-button',
                            }).then(() => {
                            });
                        }
                    })
                }
            },
            getCode1(){
                if(this.tel==''){
                    Dialog.alert({
                        message:"请输入手机号!",
                        theme: 'round-button',
                    }).then(() => {
                    });
                }else if(reg.test(this.tel)){
                    //    短信验证码
                    getCode(this.tel).then(res=>{
                        console.log(res)
                        if(res.data.code==0){
                            Notify({
                                message: '验证码已发送，请注意查收！',
                                color: '#ad0000',
                                background: '#ffe1e1',
                                height:'100px'
                            });
                        }else {
                            Notify({ type: 'primary', message: res.data.msg });
                        }
                        this.$refs.disable.style.disabled=true;
                    })
                }else{
                    Dialog.alert({
                        message:"请输入正确格式的手机号！",
                        theme: 'round-button',
                    }).then(() => {
                    });
                }

            },
        }
    }
</script>

<style scoped>
    .forgetBox {
        padding: 20px;
    }
    h1 {
        text-align: center;
        margin-top: 60px;
    }
    .inputbox {

        margin-bottom: 20px;
        /*background-color: darkgrey;*/
        border: 1px solid black;
        font-size: 15px !important;
        border-radius: 10px;
    }
    .forget {
        width: 100%;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    /deep/.van-field__label {
        margin-right: 0 !important;
        width: 5em;
    }

</style>